<template>
  <el-dialog title="查看" :visible.sync="_visible" width="60%" class="dialog">
    <span class="title">{{ data.ruleTitle }}</span>
    <div class="time">发布时间: {{ data.createTime }}</div>
    <article class="dialogContent" v-html="data.ruleContent"></article>
    <div>
      <template v-if="ruleAnnexArr.length > 0">
        <div v-for="(item,index) in ruleAnnexArr" :key="item.id">
          <i class="el-icon-paperclip"/>
          <a class="rule-item" @click="checkRule(item)">
            {{ ruleAnnexNameArr[index] }}
          </a>
        </div>
      </template>
      <a href="#" v-else>无附件</a>
    </div>
    <file-preview :center-dialog-visible.sync="previewFileVisible" :files-url.sync="fileUrl"></file-preview>
  </el-dialog>
</template>

<script>
import FilePreview from "@/components/FilePreview";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ( {} )
    }
  },
  components: {
    FilePreview
  },
  data() {
    return {
      previewFileVisible: false,
      fileUrl: ''
    }
  },
  computed: {
    _visible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit('update:visible', value)
      }
    },
    ruleAnnexArr() {
      return this.data.ruleAnnex ? this.data.ruleAnnex.split(',') : []
    },
    ruleAnnexNameArr() {
      return this.data.ruleAnnexName ? this.data.ruleAnnexName.split(',') : []
    }
  },
  methods: {
    checkRule(url) {
      this.fileUrl = url
      this.previewFileVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  margin: auto;

  .title {
    display: inline-block;
    font-size: 24px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    //font-weight: Medium;
    color: #333333;
    margin-bottom: 18px;
  }

  .time {
    color: #999;
    //font-weight: Regular;
  }

  .dialogContent {
    max-height: 400px;
    margin: 28px 0;
    overflow-y: auto;
    font-size: 16px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }

  .img-warapper {
    width: 120px;
    height: 120px;
    margin-right: 40px;
    display: inline-block;
  }
}

</style>
